<template>
	<view>
		<navbar></navbar>
		<view v-if="0 < userInfo.user_id" class="container">
			<view class="header">
				<view class="decorate">
					<view class="circle"></view>
				</view>
				<view class="wallet b-f">
					<view class="safeguard dis-flex flex-center">
						<text class="dy-iconfont icon-shouquan"></text>
						<text class="m-left10 f-22 f-bold">资金安全有保障</text>
					</view>
					<!-- <view class="f-28" style="font-weight: 600;color: #bf0000;margin-top: 10rpx;display: flex;justify-content: flex-end;margin-right: 20rpx;" @tap.stop.prevent="onbonusList">返利记录</view> -->
					
					<!-- <view class="my-invite-entry" @tap.stop.prevent="onbonusList">
					  <text class="label">返利记录</text>
					</view> -->
		<!-- 原版余额 -->
			<view class="m-top30 dis-flex flex-center">
				
            <view class="f-28">账户总余额（元）</view>
            <view class="btn-eyes eyes dis-flex flex-center" @click="toggleBalanceSecrecy">
              <text v-if="!balance.secrecy" class="dy-iconfont icon-show"></text>
              <text v-else class="dy-iconfont icon-hide"></text>
            </view>
          </view>
          <view class="balance dis-flex flex-center">
            <text v-if="!balance.secrecy">{{ parseFloat(userInfo.balance) || 0}}</text>
            <text v-else>******</text>
          </view>
		  <!-- 原版余额 -->
		  <!-- 新版余额 -->
					<!-- <view style="display: flex;justify-content: space-between;font-size: 28rpx;margin-top:50rpx;">
						<view class="totalBalance">
							<view class="title">
								账户总余额
							</view>
							<view class="money">
								<view class="oneOver" style="width: 210rpx;text-align: right;">
									{{userInfo.balance}}
								</view>
								<view class="icon">元</view>
							</view>
						</view>
						<view class="Withdrawal">
							<view class="title">
								可提现余额
							</view>
							<view class="money">
								<view class="oneOver" style="width: 210rpx;text-align: right;">
									{{userInfo.expend_money}}
								</view>
								<view class="icon">元</view>
							</view>
						</view>
					</view> -->
					<view class="recharge-withdrawal">
						<button class="btn-normal btn-recharge" @tap.stop.prevent="onRecharge">充值</button>
						<button class="btn-normal btn-withdraw" @tap.stop.prevent="onWithdraw">提现</button>
					</view>
				</view>
			</view>
			<view class="content m-top30">
				<!-- <navigator url="./detail?type=USEROWN_AVAILABLE" class="withdraw-record b-f dis-flex flex-x-between flex-y-center">
          <view class="f-28 f-bold">提现明细</view>
          <view class="dy-iconfont icon-youjiantou f-40 col-9"></view>
        </navigator> -->
				<!-- <view v-if="0 < balance.records.length" class="balance-record-wrapper b-f m-top30">
					<navigator class="all-balance-record dis-flex flex-x-between flex-y-center"
						url="./detail?type=USEROWN_PSETTLE">
						<view class="f-28 f-bold">待结算账户明细</view>
						<view class="dis-flex flex-y-center">
							<text class="f-26 col-9">全部</text>
							<text class="dy-iconfont icon-youjiantou f-40 col-9"></text>
						</view>
					</navigator>
					<view class="balance-record-list">
            <view v-for="item in balance.records" :key="item.log_id" class="balance-record">
              <view class="dis-flex flex-x-between flex-y-center f-28">
                <view>{{ item.scene.text }}</view>
                <view class="f-bold">{{ item.money }}</view>
              </view>
              <view class="m-top20 dis-flex flex-x-between flex-y-center f-22">
                <view class="col-9">{{ item.create_time }}</view>
                <view class="col-9">余额：{{ item.balance }}</view>
              </view>
            </view>
          </view>
				</view> -->
				<view v-if="0 < balance.records.length" class="balance-record-wrapper b-f m-top30">
					<navigator class="all-balance-record dis-flex flex-x-between flex-y-center"
						url="./detail?type=USEROWN_PSETTLE">
						<view class="f-28 f-bold">待结算账户明细</view>
						<view class="dis-flex flex-y-center">
							<text class="f-26 col-9">全部</text>
							<text class="dy-iconfont icon-youjiantou f-40 col-9"></text>
						</view>
					</navigator>
				</view>
				<view class="balance-record-wrapper b-f m-top30">
					<navigator class="all-balance-record dis-flex flex-x-between flex-y-center"
						url="../bank/bank">
						<view class="f-28 f-bold">银行卡管理</view>
						<view class="dis-flex flex-y-center">
							<text class="dy-iconfont icon-youjiantou f-40 col-9"></text>
						</view>
					</navigator>
				</view>
				<view class="balance-record-wrapper b-f m-top30">
					<navigator class="all-balance-record dis-flex flex-x-between flex-y-center"
						url="../modify/index">
						<view class="f-28 f-bold">支付密码管理</view>
						<view class="dis-flex flex-y-center">
							<text class="dy-iconfont icon-youjiantou f-40 col-9"></text>
						</view>
					</navigator>
				</view>
				<view class="balance-record-wrapper b-f m-top30">
					<navigator class="all-balance-record dis-flex flex-x-between flex-y-center"
						url="../wallet/walletrenewal/walletrenewal">
						<view class="f-28 f-bold">钱包续费管理</view>
						<view class="dis-flex flex-y-center">
							<text class="dy-iconfont icon-youjiantou f-40 col-9"></text>
						</view>
					</navigator>
				</view>
			</view>
			<!-- <view class="tab">
				<view class="item" v-for="(item,index) in tag" :key="index" @click="tagChoice(index)"
					:class="choice == index?'choice':''">
					{{item}}
				</view>
			</view> -->
			<!-- <view class="balance-record-list content	">
				<view v-for="item in balance.records" :key="item.log_id" class="balance-record">
					<view class="dis-flex flex-x-between flex-y-center f-28">
						<view>{{ item.scene.text }}</view>
						<view class="f-bold">{{ item.money }}</view>
					</view>
					<view class="m-top20 dis-flex flex-x-between flex-y-center f-22">
						<view class="col-9">{{ item.create_time }}</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import navbar from "@/components/navbar/navbar";
	const BALANCE_SECRECY = 'BALANCE_SECRECY';
	export default {
		components: {
			navbar
		},
		data() {
			return {
				userInfo: {
					user_id: 0,
					balance: ''
				},
				balance: {
					secrecy: uni.getStorageSync(BALANCE_SECRECY) || false, // 余额保密
					records: []
				},
				tag: ['全部', '出账', '入账'],
				choice: 0,
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad(options) {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			this.requestData();
		},
		onPullDownRefresh() {
			this.requestData(() => {
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			requestData(callback) {
				// 获取我的钱包
				app._get('user.wallet/index', {}, (res) => {
					this.userInfo = res.data.userInfo;
				});
				app._get('balance.log/lists', {
					type: 0, // 全部
					page: 1
				}, (res) => {
					let {
						data
					} = res.data.list;
					// 最多显示3条
					let count = Math.min(3, data.length);
					this.balance.records = data.slice(0, count);
				}, null, () => {
					callback && callback();
				})
			},
			// 切换是否隐藏金额
			toggleBalanceSecrecy: function() {
				this.balance.secrecy = !this.balance.secrecy;
				uni.setStorageSync(BALANCE_SECRECY, this.balance.secrecy);
			},
			// 充值
			onRecharge: function() {
				uni.navigateTo({
					url: './recharge/index'
				})
			},
			//  去提现
			onWithdraw: function() {
				uni.navigateTo({
					url: './withdraw/apply'
				})
			},
			onbonusList: function() {
				uni.navigateTo({
					url: './withdraw/bonusList'
				})
			},
			/**
			 * tag切换
			 * e 选择的索引
			 */
			tagChoice(e) {
				this.choice = e
			}


		}
	};
</script>
<style lang="scss" scoped>
	.header {
		height: 610rpx;
		position: relative
	}

	.header .decorate {
		height: 450rpx;
		position: relative;
		overflow: hidden;
	}

	.header .decorate .circle {
		width: 1800rpx;
		padding-bottom: 100%;
		// background: $uni-bg-color;
		background: #3A81F6;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		bottom: 0;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.header .wallet {
		width: calc(100% - 2 * 30rpx);
		height: 550rpx;
		border-radius: 15rpx;
		position: absolute;
		top: 60rpx;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		z-index: 2;
	}

	.header .wallet .safeguard {
		height: 60rpx;
		background: rgba(61, 62, 63, 0.13);
	}

	.header .wallet .btn-eyes {
		width: 60rpx;
		height: 60rpx;
	}

	.header .wallet .balance {
		height: 100rpx;
		margin-top: 40rpx;
		font-size: 80rpx;
		color: #000;
		text-align: center;
	}

	.header .wallet .btn-withdraw {
		width: 250rpx;
		height: 90rpx;
		background: linear-gradient(270deg,#1a1a1a,#666);
		border-radius: 15rpx;
		margin: 100rpx auto 0;
		font-size: 34rpx;
		color: #fff;
		line-height: 90rpx;
		text-align: center;
	}

	.header .wallet .btn-recharge {
		width: 250rpx;
		height: 90rpx;
		background: #6ba4e5;
		border-radius: 15rpx;
		margin: 100rpx auto 0;
		font-size: 34rpx;
		color: #fff;
		line-height: 90rpx;
		text-align: center;
	}

	.content {
		padding: 0 30rpx;
	}

	.content .withdraw-record {
		height: 120rpx;
		padding: 0 20rpx;
		border-radius: 20rpx;
	}

	.balance-record-wrapper {
		border-radius: 20rpx;
		overflow: hidden;
	}

	.all-balance-record {
		height: 100rpx;
		padding: 0 20rpx;
		position: relative;
	}

	.all-balance-record:after {
		content: "";
		width: 95%;
		height: 1px;
		background: #f9f9f9;
		position: absolute;
		left: 50%;
		bottom: 0;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.balance-record {
		padding: 40rpx 20rpx;
		margin: 20rpx 0;
		background-color: #fff;
	}

	.recharge-withdrawal {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.recharge-withdrawal {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.totalBalance {
		width: 300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: rgba(0, 0, 0, 0.9);

		.money {
			width: 250rpx;
			overflow: hidden;
			margin-top: 50rpx;
			display: flex;
			align-items: flex-end;
			font-size: 50rpx;

			.icon {
				font-size: 28rpx;
				margin-bottom: 5rpx;
			}
		}
	}

	.Withdrawal {
		width: 300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: rgba(0, 0, 0, 0.6);

		.money {
			margin-top: 50rpx;
			display: flex;
			align-items: flex-end;
			font-size: 50rpx;

			.icon {
				font-size: 28rpx;
				margin-bottom: 5rpx;
			}
		}
	}

	.tab {
		margin-top: 110rpx;
		margin-bottom: 50rpx;
		display: flex;
		align-items: flex-end;
		font-size: 32rpx;
		font-weight: bold;
		color: rgba(0, 0, 0, 0.6);

		.item {
			margin: 0 32rpx;
		}

		.choice {
			font-size: 40rpx;
			font-weight: 800;
			color: rgba(0, 0, 0, 0.9)
		}
	}
	.my-invite-entry{
		position: absolute;
		right: 0;
		top: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:0 40rpx 0 30rpx;
		height: 60rpx;
		background: #131418;
		border-radius: 28rpx 0 0 28rpx;
		z-index: 999;
	}
	.my-invite-entry .label{
		font-size: 24rpx;
		font-weight: 400;
		color: #FFF;
	}
</style>
